<template>
    <div id="dr6">
        <Breadcrumb style="margin-bottom: 10px">
            <BreadcrumbItem to="/superAdmin">首页</BreadcrumbItem>
            <BreadcrumbItem>运营分析平台</BreadcrumbItem>
            <BreadcrumbItem>拨打电话次数统计</BreadcrumbItem>
        </Breadcrumb>
        <div style="padding-right: 10px">
            <div style="padding-bottom:10px;padding-top:10px;padding-right:2px;font-size: 14px"><span
                    style="color: #aaaaaa">次数：表示每天对应的【角色】共计被拨打的次数 <br>人数：表示每天对应的【角色】共计被拨打的人数（根据用户去重）</span></div>
            <DatePicker v-model="startYearMonthDay" type="month" placeholder="选择年月" style="width: 150px"></DatePicker>
            &nbsp;
            <Select v-model="type" style="width:200px;">
                <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select> &nbsp;
            <Button type="info" @click="getData()">查询</Button>
            <Button type="info" @click="handleDownload()" style="float: right">下载报表</Button>
        </div>
        <Table style="margin-top: 10px" :maxWidth="1000" :minWidth="10" stripe :columns="columns" :data="data"
               v-if="data&&data.length>0"></Table>
        <div id="loading" v-if="loading">
            <div class="spinner">
                <div class="double-bounce1"></div>
                <div class="double-bounce2"></div>
            </div>
        </div>

    </div>
</template>
<script type="text/ecmascript-6">
    import sessionUtils from '../../model/sessionUtils';
    import ipServer from '../../model/ip';
    import Axios from 'axios';

    export default {
        data() {
            return {
                loading: false,
                type: "0",
                typeList: [
                    {
                        value: '0',
                        label: '次数'
                    },
                    {
                        value: '1',
                        label: '人数'
                    },],
                columns: [
                    {
                        title: '日期',
                        key: 'createTime'
                    },
                    {
                        title: '配件商',
                        key: 'productsBusinessCount'
                    },
                    {
                        title: '修理',
                        key: 'repairCount',
                    },
                    {
                        title: '流动补胎',
                        key: 'tyreRepairCount',
                    },
                    {
                        title: '审车',
                        key: 'vehicleInspectionCount',
                    },
                    {
                        title: '加油',
                        key: 'putOilCount',
                    },
                    {
                        title: '吊车',
                        key: 'hoistCount'
                    },
                    {
                        title: '招聘',
                        key: 'driverJobsCount'

                    },
                    {
                        title: '求职',
                        key: 'myDriverJobsCount'
                    }, {
                        title: '二手车',
                        key: 'truckSellInfoCount'
                    }
                ],
                data: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {

            getData() {
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));
                param.append('flag', this.type);
                if (this.startYearMonthDay) {
                    param.append('yearMonth', sessionUtils.DateToMonth(this.startYearMonthDay) + "");
                }
                this.loading = true;
                Axios.post(ipServer + "system/selectDailyCall", param)
                    .then(res => {
                        if (res.data.code == 0) {
                            sessionUtils.setSession("token", res.data.token);
                            this.data = [];
                            this.data = res.data.data;
                        } else if (res.data.code == 3) {
                            sessionUtils.clear();
                            this.$router.push("/login");
                            this.$Message.info(res.data.msg);
                        } else {
                            this.$Message.info(res.data.msg);
                        }
                        this.loading = false;
                    })
                    .catch(err => {
                        this.loading = false;
                        this.$Message.info(err);
                    });
            }, handleDownload() {
                this.loading = true;
                const list = this.data;
                require.ensure([], () => {
                    const {export_json_to_excel} = require('../../assets/js/Export2Excel') //这个地址和页面的位置相关，这个地址是Export2Excel.js相对于页面的相对位置
                    const tHeader = ["日期", "配件商", "修理", "流动补胎", "审车", "加油", "吊车", "招聘", "求职", "二手车"]; //这个是表头名称 可以是iveiw表格中表头属性的title的数组
                    const filterVal = ["createTime", "productsBusinessCount", "repairCount", "tyreRepairCount", "vehicleInspectionCount", "putOilCount", "hoistCount", "driverJobsCount", "myDriverJobsCount", "truckSellInfoCount"]; //与表格数据配合 可以是iview表格中的key的数组
                    const data = this.formatJson(filterVal, list)
                    export_json_to_excel(tHeader, data, '拨打电话次数统计') //列表excel  这个是导出表单的名称
                    this.loading = false
                })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            }
        }
    }
</script>


<style scoped>
    @import "../../assets/css/loading.css";

</style>